// 公共配置
const path = require('path')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    filename: '[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 处理 js 文件
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 处理 vue 文件
      {
        test: /\.vue$/,
        // 解析 .vue 文件
        // vue-loader 和 vue-template-compiler 需要一起安装使用
        // 必须引入VueLoaderPlugin 这个插件
        loader: 'vue-loader',                
      },
      // 处理 css 文件
      {
        test: /\.css$/,
        use: [
          // 将 css-loader 转换后的结果通过 style 标签追加到页面上
          'style-loader',
          // 将 css 文件转换为 js 模块
          'css-loader'
        ]
      },
      // 处理 less 文件
      {
        test: /\.less$/,
        use: [
          // 将 css-loader 转换后的结果通过 style 标签追加到页面上
          'style-loader',
          // 将 css 文件转换为 js 模块
          'css-loader',
          // 将 less 文件转换为 css 文件
          'less-loader'
        ]
      },
      // 处理图片
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10 * 1024,
          name: 'img/[name].[contenthash:6].[ext]',
          // 图片链接为[object module] url-loader默认导出的内容遵循ES模块语法，而vue-loader导入资源默认以commonJS的方式导入 修改url-loader的options，增加 esModule: false
          esModule: false
        }
      }
    ],
  },
  plugins: [
    // 将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。
    // 例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块
    new VueLoaderPlugin(),
    // 自动生成 html
    new HtmlWebpackPlugin({
      title: 'my-vue',
      template: 'public/index.html'
    }),
    // index.html  href="<%= BASE_URL %>favicon.ico" 报错解决
    new webpack.DefinePlugin({
      BASE_URL: '"./"'
    }),
    // eslint-loader 已经被废弃，改为使用 eslint-webpack-plugin
    new ESLintPlugin({
      extensions: ['js', 'vue']
    })
  ]
}